<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>行业-象限管理</title>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-ui/jquery-ui.js"></script>

<script src="${pageContext.request.contextPath}/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/bootstrap-table.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/tableExport.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/table-export.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/table/plugins/jquery.base64.js" type="text/javascript"></script>

<script src="${pageContext.request.contextPath}/ui/layui/layui.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/laydate.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/ui/layui/lay/modules/layer.js" type="text/javascript"></script>
 <script src="${pageContext.request.contextPath}/ui/layui/lay/modules/form.js" type="text/javascript"></script>
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/laydate/laydate.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery-css/jquery-ui.css">
 <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/table/bootstrap-table.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/layui.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/global.css" >
<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/layer/default/layer.css" >
 <link rel="stylesheet" href="${pageContext.request.contextPath}/ui/layui/css/modules/code.css" >


 <style>
  .container{
   	width:85%;
   	
  }
  
  .modal-industry{
  	width:700px;
  }
  .modal-body{
    max-height:750px
  }
   .modal-body-industry{
  	height:450px;
  }
 </style>

</head>

<body>
<%@include file="/webpage/frame/top.jsp" %>
<div class="container">
	<div id="modal" class="modal-industry modal fade" style="display:none">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                    <span class='alert_input'></span>
                </div>
  				<div class="modal-body-industry modal-body">
                    <div class="form-group">
                        <label>行业名称：</label>
                        <input id="industryName" type="text" class="form-control" name="industryName" placeholder="行业名称" maxlength="20" readonly="readonly">
                    </div>
                    <div style="border-bottom:1px solid #c2c2c2;margin-top:auto;margin-bottom:10px;"></div>
                      				
                    <div class="form-group">
                        <label>第一象限</label>
                    </div>
                    <div class="form-group">
                        <label>高成本低转化：</label>
                        <input id="quadrant_1" type="hidden" />
                        <input id="consumeRateMin_1" type="text" class="form-control" placeholder="最小值，保留3位小数，不填为0" maxlength="20">&nbsp;-&nbsp;                     
                        <input id="consumeRateMax_1" type="text" class="form-control" placeholder="最大值，保留3位小数，不填为0" maxlength="20">                     
                    </div>
                    <div class="form-group">
                        <label>第二象限</label>
                    </div>
                    <div class="form-group">
                        <label>低成本低转化：</label>
                        <input id="quadrant_2" type="hidden" />
                        <input type="text" class="form-control" id="consumeRateMin_2" placeholder="最小值，保留3位小数，不填为0" maxlength="20">&nbsp;-&nbsp;                   
                        <input type="text" class="form-control" id="consumeRateMax_2" placeholder="最大值，保留3位小数，不填为0" maxlength="20">
                    </div>
                    <div class="form-group">
                        <label>第三象限</label>
                    </div>
                    <div class="form-group">
                        <label>低成本高转化：</label>
                        <input id="quadrant_3" type="hidden" />
                        <input type="text" class="form-control" id="consumeRateMin_3" placeholder="最小值，保留3位小数，不填为0" maxlength="20">&nbsp;-&nbsp;                   
                        <input type="text" class="form-control" id="consumeRateMax_3" placeholder="最大值，保留3位小数，不填为0" maxlength="20">
                    </div>                    
                    <div class="form-group">
                        <label>第四象限</label>
                    </div>
                    <div class="form-group">
                        <label>高成本高转化：</label>
                        <input id="quadrant_4" type="hidden" />
                        <input type="text" class="form-control" id="consumeRateMin_4" placeholder="最小值，保留3位小数，不填为0" maxlength="20">&nbsp;-&nbsp;                   
                        <input type="text" class="form-control" id="consumeRateMax_4" placeholder="最大值，保留3位小数，不填为0" maxlength="20">
                    </div>                                     
	 				 				
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary submit">提交</button>
                </div>
            </div>
        </div>
    </div>
		<p class="toolbar">
           <button type="button" class="export-excel btn btn-primary btn-xs" data-table="#industrytable">导出Excel</button>
           <!-- <a class="create btn btn-default" href="javascript:">创建行业</a> -->
           <span class="alert"></span>
        </p>
		
     
		<table id="industrytable"  data-show-refresh="true"
               data-search="true"
               data-click-to-select="true"
               data-show-export="true"
               data-query-params="queryParams"
			   data-pagination="true"		   
               data-toolbar=".toolbar"           
               >
               <!-- data-show-columns="true" -->
            <thead>
            <tr>
            	<th data-field="state" data-radio="true"></th>
            	<th data-field="industryId" data-show="true" data-visible="false">id</th>
                <th data-field="industryName">行业名称</th>
                <th data-field="action"
                    data-align="center"
                    data-formatter="actionFormatter"
                    data-events="actionEvents">操作</th>
            </tr>
            </thead>
			
		</table>
</div>		
	
<!-- 上传组件初始化代码 -->
<script>

    var API_URL = '${pageContext.request.contextPath}/industryController.do?getALLIndustryByPage';
			
    //加载行业列表
	var $table = $('#industrytable').bootstrapTable(
   		{
   			url: API_URL,
   			pageSize:25,
   			pageList : [15, 25, 100, 500]
   		}   		  
  		 ),     
       $modal = $('#modal').modal({show: false}),
       $alert = $('.alert').hide(),
	   $alert_input = $('.alert_input').hide();
		
   
	//延迟加载
    $(function () {
    	 TableExport.init();
    	//导出按钮
    	$('#export').click(function () {
    		
    	  	$table.tableExport({
    	      type: 'excel',
    	      escape: false
    	    });
    	  });
        // create event
        $('.create').click(function () {
            showModal($(this).text());
        });

        $modal.find('.submit').click(function () {       	 
        	var prevent = false;
        	var submitPath = '${pageContext.request.contextPath}/industryController.do?doAddOrUpdate';       	
            var row = {};

            if($modal.data('industryId')){
            	row['industryId']=$modal.data('industryId');
            }
        	//检验
        	$modal.find('input[type="text"]').each(function () { 
        		if($(this).attr('id')=='industryName') {
	        		if($(this).val()=='') {
	        			showAlertModal('行业名称不能为空','danger');
	       				prevent = true;
	        		}       			        			
        		}
        		else {
	        		var re = /^[+-]?\d{0,5}\.?\d{0,3}$/;	
	        		if(re.exec($(this).val())==null) {
	        			showAlertModal('只能输入整数（最大9位）或者保留3位小数的数字','danger');        			
	       				prevent = true;
	        		}         			
        		}       		       		
        	});      	
            if($("[name=industryName]").val() != '') {
            	row['industryName'] = $("[name=industryName]").val();
            }
            /*            //判断是否存在相同行业
             $.ajax({
    			url:'${pageContext.request.contextPath}/industryController.do?ifExistIndustry',
    			type: 'post',
                dataType: 'json', //预期的服务器响应的数据类型。
                data:{
                		industryId:row['industryId'],
                		industryName:row['industryName']          	
                },
             	success: function (data) {
                	if(data.success==false) {//false：存在相同行业 
                		prevent = true;
                		showAlertModal(data.msg, 'danger');                		                		
                	}                	
             	},
                error: function () {
                	prevent = true;
                	showAlertModal('网络异常', 'danger');
                }         	
    		});	 */	
            
            //封装对应四象限信息
            row['quadrantList'] = quadrantList();
            
            setTimeout(function(){
	            if(prevent==true){          		
	            	return false;//阻止后续提交
	            }
	            $.ajax({
	                url: submitPath,
	                type: 'post',
	                contentType: 'application/json',
	                dataType: 'json', //预期的服务器响应的数据类型。
	                data: JSON.stringify(row),
	                success: function (data) {
	                    $modal.modal('hide');
	                    $table.bootstrapTable('refresh');
	                	if(data.success==true) {                   
	                    	showAlert(($modal.data('industryId') ? '更新' : '新建') + '行业成功', 'success');                		                		
	                	}
	                	else {
		                    showAlert(($modal.data('industryId') ? '更新' : '新建') + '行业失败', 'danger');              		
	                	}
	                },
	                error: function () {
	                    $modal.modal('hide');
	                    showAlert(($modal.data('industryId') ? '更新' : '新建') + '行业失败,异常', 'danger');
	                }
	            });                            	
            },800);
        });
        
    });	
	
	//封装对应四象限信息
	function quadrantList() {
		var postArray= new Array();
		var quadrant_1 = new Object();
		quadrant_1.id=$('#quadrant_1').val();
		quadrant_1.consumeRateMin=$('#consumeRateMin_1').val()==''?0:$('#consumeRateMin_1').val();
		quadrant_1.consumeRateMax=$('#consumeRateMax_1').val()==''?0:$('#consumeRateMax_1').val();	
		var quadrant_2 = new Object();
		quadrant_2.id=$('#quadrant_2').val();
		quadrant_2.consumeRateMin=$('#consumeRateMin_2').val()==''?0:$('#consumeRateMin_2').val();
		quadrant_2.consumeRateMax=$('#consumeRateMax_2').val()==''?0:$('#consumeRateMax_2').val();	
		var quadrant_3 = new Object();
		quadrant_3.id=$('#quadrant_3').val();
		quadrant_3.consumeRateMin=$('#consumeRateMin_3').val()==''?0:$('#consumeRateMin_3').val();
		quadrant_3.consumeRateMax=$('#consumeRateMax_3').val()==''?0:$('#consumeRateMax_3').val();	
		var quadrant_4 = new Object();
		quadrant_4.id=$('#quadrant_4').val();
		quadrant_4.consumeRateMin=$('#consumeRateMin_4').val()==''?0:$('#consumeRateMin_4').val();
		quadrant_4.consumeRateMax=$('#consumeRateMax_4').val()==''?0:$('#consumeRateMax_4').val();	
					
		postArray.push(quadrant_1);
		postArray.push(quadrant_2);
		postArray.push(quadrant_3);
		postArray.push(quadrant_4);		
		
		return postArray;
	}

    function queryParams(params) {
        return {};
    }

    function actionFormatter(value) {
        return [
            '  <a class="update btn btn-default" href="javascript:" title="修改行业-象限信息">编辑象限值</a>',
            /* '  <a class="remove btn btn-default" href="javascript:" title="删除行业信息">删除</a>', */
        ].join('');
    }
    
    

    // update and delete events
    window.actionEvents = {
        'click .update': function (e, value, row) {
        	showModal_update($(this).attr('title'), row);
        },
        'click .remove': function (e, value, row) {
            if (confirm('你确定要删除这信息?')) {
                $.ajax({               	
                    url: '${pageContext.request.contextPath}/industryController.do?doDelete',
                    type: 'post',
                    dataType: 'json', //预期的服务器响应的数据类型。
                    data:{industryId: row.industryId},
                    success: function (data) {
                       $table.bootstrapTable('refresh');
	                   	if(data.success == true) {                     		
	                        showAlert(data.msg, 'success');                    		                   		
	                 	}
	                 	else {
	                        showAlert(data.msg, 'danger');                    		                   		                       		
	                 	}                                                               		                   		
                    },
                    error: function () {
                        showAlert('删除行业信息失败，异常!', 'danger');
                    }
                });
            }
        }
    };

    //弹出窗口-创建
    function showModal(title, row) {
        row = row || {
        	industryId: '',
            industryName: ''
            
        }; // default row value

        $modal.data('industryId', row.industryId);
        $modal.find('.modal-title').text(title);
        
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);

        }
		//边界值默认值为0
		defaultVal();
		
        $modal.modal('show');
    }
    //边界值默认值为0
	function defaultVal() {
    	$modal.find('input[type="text"]').each(function () { 
    		if($(this).attr('id')!='industryName') {
        		$(this).val(0);   			        			
    		}     		       		
    	});		
	}
    
    //弹出窗口-修改
    function showModal_update(title, row) {
        row = row || {
        	industryId: '',
            industryName: ''
            
        }; // default row value

        $modal.data('industryId', row.industryId);
        $modal.find('.modal-title').text(title);
        
        for (var name in row) {
            $modal.find('input[name="' + name + '"]').val(row[name]);
        } 

        //加载对应四象限信息
        loadQuadrant(row.industryId);  
                
    	$modal.modal('show');
    }   
    //加载对应四象限信息
    function loadQuadrant(industryId) {   	
		var Quadrant_URL = '${pageContext.request.contextPath}/quadrantController.do?getQuadrantsByIndustryId';		  
	       $.ajax({
	           url: Quadrant_URL,
	           type:'GET',
	           contentType: 'application/json',
	           dataType: 'json',
	           data: {industryId: industryId},
	           success: function (data) {         	
	           	var jsonObject = eval(data);//eval()将字符串转成对象数组
	           	$('#quadrant_1').val(jsonObject[0].quadrantId);
	           	$('#quadrant_2').val(jsonObject[1].quadrantId);
	           	$('#quadrant_3').val(jsonObject[2].quadrantId);
	           	$('#quadrant_4').val(jsonObject[3].quadrantId);           	
	           	$('#consumeRateMin_1').val(jsonObject[0].consumeRateMin);
	           	$('#consumeRateMax_1').val(jsonObject[0].consumeRateMax);
	           	$('#consumeRateMin_2').val(jsonObject[1].consumeRateMin);
	           	$('#consumeRateMax_2').val(jsonObject[1].consumeRateMax);
	           	$('#consumeRateMin_3').val(jsonObject[2].consumeRateMin);
	           	$('#consumeRateMax_3').val(jsonObject[2].consumeRateMax);
	           	$('#consumeRateMin_4').val(jsonObject[3].consumeRateMin);
	           	$('#consumeRateMax_4').val(jsonObject[3].consumeRateMax);	           
	           },
	           error: function () {
				console.log('加载四象限数据失败');
	           }
	       });   	 	
    }
    
    function showAlert(title, type) {
        $alert.attr('class', 'alert alert-' + type || 'success')
              .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
        setTimeout(function () {
            $alert.hide();
        }, 3000);
    }
    
    function showAlertModal(title, type) {
    	
    	$alert_input.attr('class', 'alert alert-' + type || 'success')
              .html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
    	 setTimeout(function () {
    		 	$alert_input.hide();
         }, 3000);
        
    }    
    

    
   
</script>
<%@include file="/webpage/frame/bottom.jsp" %>
</body>
</html>